<template>
    <div class="record-item" @touchstart='touchstart' @touchmove='touchmove' @touchend="touchend"
    :class="{'tran': isTran}"
    :style="{'left': left + 'px'}">
        <img class="record-head" src="@/assets/img/weLiao/qun-head.png" alt="" srcset="">
        <div class="record-info">
            <div class="record-name">发多少发送到发生付水电费第三方士大夫士大夫水电费水电费</div>
            <div class="record-msg">sfsdfdsfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsfsdfsfsdfsdfsdfs</div>
        </div>
        <div class="record-time">2020-12-12</div>
        <div ref="delBtn" class="del-btn">删除</div>
    </div>
</template>
<script>
export default {
    data () {
        return {
            left: 0,
            isTran: true
        }
    },
    methods: {
        touchstart (e) {
            this.isTran = false

            var touche = e.touches[0]
            this.startX = touche.clientX
            this.startY = touche.clientY
            
            this.startLeft = e.currentTarget.style.left
            this.startLeft = this.startLeft.replace('px', '')
            this.startLeft = parseInt(this.startLeft)
        },
        touchmove (e) {
            var touche = e.touches[0]
            this.moveX = touche.clientX
            this.moveY = touche.clientY

            this.offsetX = this.moveX - this.startX
         
            var temp = this.startLeft + this.offsetX
            if (temp > 0) {
                temp = 0
            }
            if (temp < -this.$refs.delBtn.offsetWidth) {
                temp = -this.$refs.delBtn.offsetWidth
            }
            this.left = temp
            
        },
        touchend () {
            this.isTran = true
           
            if (this.offsetX < -20) {
                this.left =  -this.$refs.delBtn.offsetWidth
            }
            if (-20 <this.offsetX && this.offsetX < 0) {
                this.left = 0
            }

            if (this.offsetX > 20) {
                this.left = 0
            }
            if (0 < this.offsetX && this.offsetX < 20) {
                this.left =  -this.$refs.delBtn.offsetWidth
            }
        }
    },
    mounted () {
       
    }
}
</script>
<style scoped>
.record-item{
    height: 1.38rem; box-sizing: border-box;  background: #fff; position: relative;padding: 0rem 0 0 0.32rem;
    left: 0;
}
.record-head{
    display: inline-block; width: 0.9rem; height: 0.9rem; vertical-align: middle;
}
.record-info{
    display: inline-block;padding: 0.24rem 0rem 0.24rem 0.26rem; box-sizing: border-box; vertical-align: middle;
    width: 5.9rem;height: 100%; border-bottom: 1px solid #E5E5E5;
}
.record-name{
    font-size: 0.32rem; color: #000; padding: 0 0 0.1rem 0;
    width: 60%; overflow: hidden;white-space: nowrap;text-overflow: ellipsis;
}
.record-msg{
    font-size: 0.26rem; color: #999999;  overflow: hidden;white-space: nowrap;text-overflow: ellipsis;
}
.record-time{
    position: absolute;  top: 0.3rem; right: 0.3rem; font-size: 0.26rem; color: #999999;
}
.del-btn{
    width: 1.29rem; height: 1.38rem; line-height: 1.38rem; text-align: center; background: #FA4848; color: #fff;
    position: absolute; top: 0; right: -1.29rem;
}
.tran{
    transition: 0.2s;
}
</style>
